import moment from 'moment'

import { useDispatch, useSelector } from 'react-redux'
import { Button, Card, ListGroup, ListGroupItem } from 'reactstrap'
import { checkInAppointmentsAction } from '../../redux/appointment/appointmentAction'
import { useState, useEffect } from 'react'

const AppointmentCard = ({ item, getLoading }) => {
  const dispatch = useDispatch()
  const [currentTime, setCurrentTime] = useState(moment())

  const { checkInLoading } = useSelector((state) => state.appointment)
  const handleCheckIn = (id) => {
    const data = {
      checked_in: true
    }
    dispatch(checkInAppointmentsAction({ id, data }))
  }

  // const checkInDate = moment.unix(item?.startDate)
  const startDateTime = moment
    .unix(item?.startDate)
    .startOf('day')
    .add(moment(item?.startTime, 'HH:mm:ss'))

  const difference = startDateTime.diff(currentTime, 'minutes')
  const enableBtn = difference <= 15
  useEffect(() => {
    const interval = setInterval(() => {
      setCurrentTime(moment())
    }, 1000)
    return () => clearInterval(interval)
  }, [])
  return (
    <div>
      <Card className="prevCard">
        <ListGroup flush className="PrevGroup">
          <ListGroupItem
            className={item.checked ? 'nextCardHead' : 'prevCardHead'}
          >
            <p className="PrevSize">{item.appointmentTitle} </p>
            <p className="prevCard--date">
              <span>{item.date} | </span>
              {item.time}
            </p>
          </ListGroupItem>

          {item.teleHealth === false && (
            <ListGroupItem className="prevCardItem">
              <div className="pl-4 pr-4 d-flex  ">
                <div className="setIcon">{item.locationIcon}</div>
                <div className="setDeatils">
                  <h6> {item.locationTitle} </h6>
                  <p className="sizing">{item.address}</p>
                </div>
              </div>
            </ListGroupItem>
          )}

          <ListGroupItem className="prevCardItem">
            <div className={`check-in-section w-100`}>
              <div className="d-flex">
                <div className="setIcon">{item.iconTwo}</div>
                <div className="setDeatils">
                  <h6>{item.titleTwo}</h6>
                  <p className="sizing">{item.meeting || '--'}</p>
                </div>
              </div>
              <div className="d-flex">
                <div className="setIcon">{item.UserIcon}</div>
                <div className="setDeatils">
                  <h6> {item.user} </h6>
                  <p className="sizing">{item.userName}</p>
                </div>
              </div>
              {!item.checked &&
                item.appointmentTitle !== 'Previous Appointment' && (
                  <Button
                    style={{ marginTop: '-8px' }}
                    size="sm"
                    disabled={
                      checkInLoading ||
                      getLoading ||
                      !item.id ||
                      !!item.checked ||
                      !enableBtn ||
                      item.checkInAppointments
                    }
                    className={item.checked ? 'AppointmentBtn checkBtn' : null}
                    onClick={() => handleCheckIn(item?.id)}
                  >
                    {/* {checkInLoading ? <Spinner size="sm" className='spinner-size-lg' /> : <Check size={5} />} */}
                    <span className="check-in">Check-in</span>
                  </Button>
                )}
            </div>
          </ListGroupItem>
        </ListGroup>
      </Card>
    </div>
  )
}

export default AppointmentCard
